<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>权限列表</title>
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/css/zTreeStyle/zTreeStyle.css" />
	<style type="text/css">
	div#rMenu {position:absolute; visibility:hidden; top:0; text-align: left;padding: 2px;}
	div#rMenu ul li{
		margin: 1px 0;
		padding: 0 5px;
		cursor: pointer;
		list-style: none outside none;
		background-color: #DFDFDF;
	}
	
	</style>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/zTree/jquery.ztree.core-3.5.min.js"></script>
	<script id="tmpl_menu" type="text/x-jquery-tmpl">
	<form id="menuForm" class="form-horizontal" method="post">
	<input type="hidden" name="parentId" value="{{= parentId}}" />
	<input type="hidden" name="menuId" value="{{= menuId}}" />
	<div class="control-group">
	<label class="control-label">权限名称</label>
	<div class="controls">
		<input type="text" name="menuName" value="{{= menuName}}" >
	</div>
	</div>
	<div class="control-group">
	<label class="control-label">权限编号</label>
	<div class="controls">
		<input type="text" name="menuCode" value="{{= menuCode}}" >
	</div>
	</div>
	<div class="control-group">
	<label class="control-label">权限URL</label>
	<div class="controls">
		<input type="text" name="menuUrl" value="{{= menuUrl}}">
	</div>
	</div>
	<div class="control-group">
	<label class="control-label">权限序列</label>
	<div class="controls">
		<input type="text" name="orderBy" value="{{= orderBy}}" >
	</div>
	</div>
	<div class="control-group">
	<label class="control-label">图标</label>
	<div class="controls">
		<input type="text" name="menuIcon" value="{{= menuIcon}}" >
	</div>
	</div>
	<div class="control-group">
	<label class="control-label">权限说明</label>
	<div class="controls">
		<textarea name="menuDesc" >{{= menuDesc}}</textarea>
	</div>
	</div>
	<div class="form-actions">
    	<button class="btn btn-success" id="btn_sub" type="submit">保存</button>
    </div>
	</form>
	</script>
	<script type="text/javascript">
	<!--
	var setting = {
		async:{
			enable:true
			,type:"post"
			,url:"${pageContext.request.contextPath }/sysuser/getSysMenuInfoTreeData.do"
			,dataFilter:function(treeId, parentNode, responseData) {
				if(true == responseData.isSuccess){
					return responseData.returnObject;
				}else{
					return {"menuId":"0","menuName":"获取失败"};
				}
			}
		},view: {
			dblClickExpand: false
		}
		,data:{
			key:{
				name:"menuName"
			}
			,simpleData:{
				enable:true
				,idKey:"menuId"
				,pIdKey:"parentId"
			}
		}
		,callback: {
			onRightClick: function(event, treeId, treeNode){
				if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
					zTree.cancelSelectedNode();
					showRMenu("root", event.clientX, event.clientY);
				} else if (treeNode && !treeNode.noR) {
					zTree.selectNode(treeNode);
					if("0"==treeNode.menuId){
						showRMenu("root", event.clientX, event.clientY);
					}else{
						showRMenu("node", event.clientX, event.clientY);
					}
				}
			}
		}
	};
	function showRMenu(type, x, y) {
		$("#rMenu ul").show();
		if (type=="root") {
			$("#m_del").hide();
			$("#m_update").hide();
			$("#m_unCheck").hide();
		} else {
			$("#m_del").show();
			$("#m_update").show();
			$("#m_unCheck").show();
		}
		rMenu.offset({ top: y, left: x });
		rMenu.css({"visibility":"visible"});

		$("body").bind("mousedown", onBodyMouseDown);
	}
	function hideRMenu() {
		if (rMenu) rMenu.css({"visibility": "hidden"});
		$("body").unbind("mousedown", onBodyMouseDown);
	}
	function onBodyMouseDown(event){
		if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
			rMenu.css({"visibility" : "hidden"});
		}
	}
	function resetTree() {
		hideRMenu();
		$.fn.zTree.init($("#menuTree"), setting, zNodes);
	}
	function addMenu(){
		hideRMenu();
		var menuId = 0;
		if (zTree.getSelectedNodes()[0]) {
			menuId = zTree.getSelectedNodes()[0].menuId;
		}
		$("#menuContent").empty();
		$.when(
			$("#tmpl_menu").tmpl({"parentId":menuId}).appendTo("#menuContent")
		).done(function(){
			$("#menuForm").validate({
				rules:{
					menuName:{
						required:true
						,maxlength:50
					}
					,menuCode:{
						required:true
						,maxlength:25
					}
					,menuUrl:{
						required:true
						,maxlength:50
					}
					,orderBy:{
						digits:true
					}
				}
				,submitHandler:function(form){
					$(form).ajaxSubmit({
						url:"${pageContext.request.contextPath}/sysuser/saveSysMenuInfo.do"
						,type:"post"
						,dataType:"json"
						,success:function(data){
							if(true == data.isSuccess){
								zTree.reAsyncChildNodes(null, "refresh");
								$("#tmpl_alert").tmpl({type:"success", title:"成功",message:data.returnObject}).appendTo("#message_alert");
								$("#menuContent").html("右键选取权限节点");
							}else{
								$("#tmpl_alert").tmpl({type:"error",title:"失败",message:data.errorMsg}).appendTo("#message_alert");
							}
						}
					});
				}
			});
		});
	}
	
	function updateMenu(){
		hideRMenu();
		var menuId = 0;
		if (zTree.getSelectedNodes()[0]) {
			menuId = zTree.getSelectedNodes()[0].menuId;
		}
		$("#menuContent").empty();
		$.post("${pageContext.request.contextPath}/sysuser/getSysMenuInfoData.do",{"menuId":menuId},function(data){
			if(true == data.isSuccess){
				$.when(
					$("#tmpl_menu").tmpl(data.returnObject).appendTo("#menuContent")
				).done(function(){
					$("#menuForm").validate({
						rules:{
							menuName:{
								required:true
								,maxlength:50
							}
							,menuCode:{
								required:true
								,maxlength:25
							}
							,menuUrl:{
								required:true
								,maxlength:50
							}
							,orderBy:{
								digits:true
							}
						}
						,submitHandler:function(form){
							$(form).ajaxSubmit({
								url:"${pageContext.request.contextPath}/sysuser/updateSysMenuInfo.do"
								,type:"post"
								,dataType:"json"
								,success:function(data){
									if(true == data.isSuccess){
										zTree.reAsyncChildNodes(null, "refresh");
										$("#tmpl_alert").tmpl({type:"success", title:"成功",message:data.returnObject}).appendTo("#message_alert");
										$("#menuContent").html("右键选取权限节点");
									}else{
										$("#tmpl_alert").tmpl({type:"error",title:"失败",message:data.errorMsg}).appendTo("#message_alert");
									}
								}
							});
						}
					});
				});
			}else{
				$("#tmpl_alert").tmpl({type:"error",title:"失败",message:data.errorMsg}).appendTo("#message_alert");
			}
		},"json");
	}
	
	function removeTreeNode(){
		
	}
	
	function resetTree(){
		zTree.reAsyncChildNodes(null, "refresh");
	}

	var zTree, rMenu;
	$(function(){
		$.fn.zTree.init($("#menuTree"), setting);
		zTree = $.fn.zTree.getZTreeObj("menuTree");
		rMenu = $("#rMenu");
		
	});

	//-->
	</script>
</head>
<body>
	<div class="container-fluid">
    <hr>
    <div class="row-fluid">
      <div class="span4">
      	<div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
            <h5>权限列表</h5>
          </div>
          <div class="widget-content nopadding" >
          	<ul id="menuTree" class="ztree"></ul>
          </div>
        </div>
      </div>
      <div class="span8">
	      <div class="widget-box">
	          <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
	            <h5>权限信息</h5>
	          </div>
	          <div id="menuContent" class="widget-content nopadding">
	          	右键选取权限节点
	          </div>
	        </div>
      </div>
    </div>
    </div>
    <div id="rMenu">
		<ul style="margin: 0px; padding: 0px;">
			<li id="m_add" onclick="addMenu();">增加权限</li>
			<li id="m_update" onclick="updateMenu();">修改权限</li>
			<li id="m_del" onclick="removeTreeNode();">删除权限</li>
			<li id="m_reset" onclick="resetTree();">刷新</li>
		</ul>
	</div>
    
</body>
</html>